<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>02_jquery中$get形式完成异步请求</title>
</head>
<body>
    <h2>用户注册</h2>
    用户名:<input id="username" type="text" name="username" onblur="sendAjax()" /><br/>
    <span id="info" style="color: red"></span><br/>
    测试:<input type="text"/>
</body>
    <!--发起异步请求
      需求 模拟百度注册 用户名提示
          当录入完用户名，当失去焦点之后
          悄悄给服务器发起一个请求  请求就是校验用户名是否存在的。
          如果存在 就把响应回来的提示信息展示到 span标签中
           实现
             1:给页面标签添加一个 失去焦点事件
             2:事件触发函数
              3:函数中完成 发起异步请求
              4: 响应回来的数据要回显到span中
    -->
<!--先引入 jquery的js文件-->
<script src="jquery-3.2.1.min.js"></script>
<script>
       function sendAjax(){
           //我们要使用jquery中的 $.get()形式发送请求
         /*
         $.get(url,data,function,type);
              url : 就是你想访问得 servlet地址
              data:是什么？ 你的请求参数
                 get中请求参数的格式  k=v&k=v
              function方法
                 回调函数---就是如果响应成功就执行该函数
                   说白了就是把我们需要如何处理响应信息 写在这里
                   function(data){
                        处理响应信息代码？响应信息在哪？参数上的data就是响应体数据
                     }
              type:指的是 你期望的返回的数据类型
                    前端给后端发请求了，希望后端给我们 数据的格式是什么
                        可以是 json形式的 可以是xml形式的
                         默认是  文本形式
          */
         var username = $("#username").val();
         //这是采用jquery的语法获取标签中的value属性
         var url = "/day09/jQueryGet";
         var data = "username="+username;

           $.get(url,data,function(data){
               //这个函数就是 响应成功之后会自动调用的
               // 其中data参数就是响应体数据
               console.log("响应回来数据是:"+data);
               //要把响应回来数据设置到  span中
               //用之前js语法可以
               //还可以这样设置
               $("#info").html(data);
           });
       }

</script>
</html>